class Enlarge {
    constructor (select) {
      // 0. 范围元素
      this.ele = document.querySelector(select)
      // 1. 遮罩层盒子
      this.mask = this.ele.querySelector('.mask')
      // 2. 放大图片的盒子
      this.enlarge = this.ele.querySelector('.enlarge')
      // 3. 列表盒子
      this.list = this.ele.querySelector('.list')
      // 4. 展示图片盒子
      this.show = this.ele.querySelector('.show')
      // 5. show 盒子的尺寸
      this.show_width = this.show.clientWidth
      this.show_height = this.show.clientHeight
      // 6. mask 盒子的尺寸
      // 获取非行内样式
      this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
      this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
      // 7. 背景图片尺寸
      // 获取 backgroundSize 样式
      this.bg_width = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0])
      this.bg_height = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1])
    //   启动器
      this.init()
    }
  
    // 原型上的方法
    // 0. 启动器
    init () {
      // 去调用所有的方法
      this.setScale()
      this.overOut()
      this.move()
      this.listChange()
    }
  
    // 1. 调整尺寸
    setScale () {
      // 求出 enlarge 盒子应该的尺寸
      this.enlarge_width = this.mask_width * this.bg_width / this.show_width
      this.enlarge_height = this.mask_height * this.bg_height / this.show_height
  
      // 直接给 enlarge 盒子进行赋值
      this.enlarge.style.width = this.enlarge_width + 'px'
      this.enlarge.style.height = this.enlarge_height + 'px'
    }

    // 2.移入移出
    overOut () {
        // 2-1. 移入事件
        this.show.addEventListener('mouseover', () => {
          this.mask.style.display = 'block'
          this.enlarge.style.display = 'block'
        })
    
        // 2-2. 移出事件
        this.show.addEventListener('mouseout', () => {
          this.mask.style.display = 'none'
          this.enlarge.style.display = 'none'
        })
      }

    // 3.移动联动
    move () {
        // 3-1. 绑定事件
        this.show.addEventListener('mousemove', e => {
          e = e || window.event
    
          // 3-2. 获取坐标点
          let x = e.offsetX - this.mask_width / 2
          let y = e.offsetY - this.mask_height / 2
    
          // 3-3. 边界值判断
          if (x <= 0) x = 0
          if (y <= 0) y = 0
          if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
          if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height
    
          // 3-4. 给元素进行赋值
          this.mask.style.left = x + 'px'
          this.mask.style.top = y + 'px'
    
          // 3-5. 根据比例计算出一个 背景图 的移动尺寸
          // 公式: enlarge 移动距离 = enlarge 盒子尺寸 * mask 盒子移动距离 / mask 盒子尺寸
          const bg_x = this.enlarge_width * x / this.mask_width
          const bg_y = this.enlarge_height * y / this.mask_height
    
          // 3-6. 给 this.enlarge 的 backgroundPosition 赋值
          this.enlarge.style.backgroundPosition = `-${ bg_x }px -${ bg_y }px`
        })
      }
}
